<template>
  <div>
    <myDivider name="车位管理"></myDivider>
    <div class="Top">
      <div style="display: flex;">

        <el-input style="width: 200px;" v-model="keyName" placeholder="根据小区名称搜索" @keyup.enter.native="SouSuo"
          clearable></el-input>

        <div style="margin-left: 20px;">
          <el-select style="width: 100px" v-model="keyType" placeholder="请选择搜索类型">
            <el-option label="车位号" value="1"></el-option>
            <el-option label="归属人" value="2"></el-option>
            <el-option label="租赁人" value="3"></el-option>
          </el-select>
          <el-input style="width: 170px;margin-left: -5px;" v-model="keyWords" placeholder="根据关键词搜索"
            @keyup.enter.native="SouSuo" clearable></el-input>
        </div>

        <el-select style="width: 180px;margin-left: 20px;" @change="SouSuo" clearable v-model="KeyState" placeholder="请选择管理费状态">
          <el-option label="未缴纳" value="0"></el-option>
          <el-option label="正常" value="1"></el-option>
          <el-option label="已延期" value="2"></el-option>
        </el-select>

        <!-- <el-date-picker @change="SouSuo" style="width: 250px;margin-left: 20px;" value-format="yyyy-MM-dd"
          v-model="keyTime" type="daterange" range-separator=" " start-placeholder="创建时间" end-placeholder="请选择时间段">
        </el-date-picker> -->

        <el-button type="primary" style=" margin-left: 15px" @click="SouSuo">查询</el-button>
        <el-button style="margin-left: 15px" @click="reset">重置</el-button>
      </div>
      <el-button style="margin-top: 10px;" type="primary" @click="addClick">新增</el-button>
      <el-button icon="el-icon-files" @click="ToBatchImport">批量导入</el-button>

    </div>
    <el-table class="tableBox" :data="TableData" style="width: 100%">
      <el-table-column align="center" prop="rqName" label="小区名称" width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.rqName ? scope.row.rqName : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="pictureUrl" label="车位照片" width="100px">
        <template slot-scope="scope">
          <el-image v-if="scope.row.pictureUrl" style="width: 80px; height: 60px" :src="scope.row.pictureUrl"
            :preview-src-list="[...scope.row.pictureUrl]">
          </el-image>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="code" label="车位号" width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.code ? scope.row.code : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="belongUserName" label="归属人" width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.belongUserName ? scope.row.belongUserName : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="belongUserPhoneNumber" label="手机号码" width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.belongUserPhoneNumber ? scope.row.belongUserPhoneNumber : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="tenantUserName" label="租赁人" width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.tenantUserName ? scope.row.tenantUserName : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="tenantUserPhoneNumber" label="手机号码">
        <template slot-scope="scope">
          <span>{{ scope.row.tenantUserPhoneNumber ? scope.row.tenantUserPhoneNumber : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="parkingStatus" label="车位状态" width="80px">
        <template slot-scope="scope">
          <div style="display: flex;align-items: center;justify-content: space-evenly">
            <div style="width: 10px;height: 10px;border-radius: 100px;"
              :style="{ backgroundColor: scope.row.parkingStatus == '0' ? '#81b337' : '#bd3124' }"></div>
            <span>{{ scope.row.parkingStatus == '0' ? '空闲' : '已满' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="parkingCarNumber" label="停靠车牌号" width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.parkingCarNumber ? scope.row.parkingCarNumber : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="parkingCarOwnerName" label="停靠车主姓名" width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.parkingCarOwnerName ? scope.row.parkingCarOwnerName : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="parkingCarOwnerPhoneNumber" label="停靠车主手机号码" width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.parkingCarOwnerPhoneNumber ? scope.row.parkingCarOwnerPhoneNumber : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="managementFeesStatus" label="管理费" width="100px">
        <template slot-scope="scope">
          <div style="display: flex;align-items: center;justify-content: space-evenly">
            <div style="width: 10px;height: 10px;border-radius: 100px;"
              :style="{ backgroundColor: scope.row.managementFeesStatus == '0' ? '#81b337' : scope.row.managementFeesStatus == '1' ? '#1671da' : '#bd3124' }">
            </div>
            <span>{{ scope.row.managementFeesStatus == '0' ? '未缴纳' : scope.row.managementFeesStatus == '1' ? '已缴纳' :
          '已延期' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="parkingCarOwnerPhoneNumber" label="租赁期限" width="400px">
        <template slot-scope="scope">
          <span>{{ scope.row.tenantTermStart && scope.row.tenantTermEnd ?
          scope.row.tenantTermStart + '~' + scope.row.tenantTermEnd : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="parkingCarOwnerPhoneNumber" label="管理费期限" width="400px">
        <template slot-scope="scope">
          <span>{{ scope.row.managementFeesStart && scope.row.managementFeesEnd ?
          scope.row.managementFeesStart + '~' + scope.row.managementFeesEnd : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200px" fixed="right">
        <template slot-scope="scope">
          <div class="textBtn">
            <el-row>
              <el-col class="el" :span="7">
                <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="updateClick(scope.row)">编辑</span>
              </el-col>
              <el-col class="el" :span="10">
                <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                  @click="bindingClick(scope.row)">车辆绑定</span>
              </el-col>
              <el-col class="el" :span="7">
                <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="deleteClick(scope.row)">删除</span>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
    </el-table>


    <!-- 新增车位弹窗 -->
    <el-dialog class="dialogStyle" :close-on-click-modal="false" width="600px"
      :title="addSpacePopType == 'add' ? '新增车位信息' : '修改车位信息'" :visible.sync="addSpaceShow">
      <el-divider></el-divider>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="所属小区：" prop="" required>
          <div style="display: flex;align-items: center;">
            <el-button :disabled="addSpacePopType == 'update'" style="margin-right: 10px"
              @click="toSelect('所属小区')">选择</el-button>
            <el-input style="width: 280px;" v-model="ruleForm.residentialName" disabled
              placeholder="请点击按钮选择所属小区"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="车位号：" prop="code">
          <el-input style="width: 360px;" v-model="ruleForm.code" maxlength="20" placeholder="请输入车位号"></el-input>
        </el-form-item>
        <el-form-item label="归属人：" prop="" required>
          <div style="display: flex;align-items: center;">
            <el-select style="width: 280px;" v-model="ruleForm.belongUserType"
              @change="ruleForm.belongUserId = ''" placeholder="请选择归属人类型">
              <el-option label="机构" value="company"></el-option>
              <el-option label="个人" value="user"></el-option>
            </el-select>
            <el-button style="margin-left: 10px" @click="toSelect('归属人')"
              :disabled="!ruleForm.belongUserType">选择</el-button>
          </div>
        </el-form-item>
        <el-form-item label="车位照片：">
          <MyUploadImgNotDetele :canUploadNum="1" v-if="MyUploadImgNotDeteleShow" @deleteImgList="deleteImgList"
            @getImgList="getImgList" :id="uploadId" :EchoImgList="EchoImgList" uploadKey1="spacePictureFile"
            uploadUrl="/business/parkingSpace/uploadPicture">
          </MyUploadImgNotDetele>
        </el-form-item>
        <el-form-item label="产权期限：" prop="" required>
          <el-radio v-model="ruleForm.propertyTermYears" label="40"
            @change="ruleForm.propertyTermStart = ''; endTimeShow = false">40年产权</el-radio>
          <el-radio v-model="ruleForm.propertyTermYears" label="70"
            @change="ruleForm.propertyTermStart = ''; endTimeShow = false">70年产权</el-radio>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker style="width: 200px;" v-model="ruleForm.propertyTermStart" type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" @change="timeChange">
          </el-date-picker>
          <span v-if="endTimeShow">
            ~
            <el-date-picker style="width: 200px;" v-model="ruleForm.propertyTermEnd" type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" disabled>
            </el-date-picker>
          </span>

        </el-form-item>

      </el-form>

      <el-divider></el-divider>
      <div slot="footer" style="display: flex;justify-content: space-evenly;align-items: center;height: 60px;">
        <el-button @click="addSpaceShow = false">取 消</el-button>
        <el-button type="primary" @click="addSpaceOk">确
          定</el-button>
      </div>

    </el-dialog>





    <!-- 选择弹窗 -->
    <el-dialog class="dialogStyle" :close-on-click-modal="false" width="600px"
      :title="selectType == 'cell' ? '选择归属小区' : '选择归属人'" :visible.sync="selectShow">
      <el-divider></el-divider>
      <div style="display: flex;justify-content: space-between;margin: 20px 0;align-items: center;">
        <el-cascader v-if="selectType == 'cell'" @change="getSelectCellData" style="width: 200px;" clearable
          v-model="selectPopKeyCode" :options="selectPopKeyCodeData" :props="props" placeholder="请选择地区"></el-cascader>
        <el-input v-if="selectType == 'cell'" size="medium" style="width: 200px;" v-model="selectPopKeyCellName"
          placeholder="根据小区名称搜索"></el-input>

        <el-input v-if="selectType == 'people'" size="medium" style="width: 200px;" v-model="selectPopKeyName"
          placeholder="根据名称搜索"></el-input>
        <el-input v-if="selectType == 'people'" size="medium" style="width: 200px;" v-model="selectPopKeyphone"
          placeholder="根据手机号搜索"></el-input>


        <el-button size="medium" type="primary" @click="SelectSouSuo">查询</el-button>
      </div>
      <div class="popTableStyle">
        <el-table ref="selectTable" :empty-text="emptyText" @current-change="selectClick" :data="selectData"
          style="width: 100%" height="400px" highlight-current-row>

          <el-table-column v-if="selectType == 'cell'" align="center" prop="areaName" label="地区">
          </el-table-column>
          <el-table-column v-if="selectType == 'cell'" align="center" prop="name" label="小区名称">
            <!-- <template slot-scope="scope">
              {{ scope.row.unitType == 'agency' ? '机关' : scope.row.unitType
        == 'company' ? '机构' : '系统' }}
            </template> -->
          </el-table-column>
          <el-table-column v-if="selectType == 'people' && ruleForm.belongUserType == 'user'" align="center" prop="name"
            label="用户姓名">
          </el-table-column>
          <el-table-column v-if="selectType == 'people' && ruleForm.belongUserType == 'user'" align="center"
            prop="account" label="手机号码">
          </el-table-column>

          <el-table-column v-if="selectType == 'people' && ruleForm.belongUserType == 'company'" align="center"
            prop="short_name" label="机构姓名">
          </el-table-column>
          <el-table-column v-if="selectType == 'people' && ruleForm.belongUserType == 'company'" align="center"
            prop="contact_name" label="负责人">
          </el-table-column>
          <el-table-column v-if="selectType == 'people' && ruleForm.belongUserType == 'company'" align="center"
            prop="telephone_number" label="手机号码">
          </el-table-column>
        </el-table>
      </div>

      <el-divider></el-divider>
      <div slot="footer" style="display: flex;justify-content: space-evenly;align-items: center;height: 60px;">
        <el-button @click="selectShow = false">取 消</el-button>
        <el-button type="primary" @click="selectOk">确
          定</el-button>
      </div>

    </el-dialog>

    <!-- 分页器 -->
    <myPagination :pageNum="pageNum" :total="totalSize" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
  </div>
</template>





<script>
import MyUploadImgNotDetele from '@/components/upload/MyUploadImgNotDetele'
export default {
  components: {
    MyUploadImgNotDetele
  },
  data() {
    return {
      // 顶部筛选 ===================
      keyName: '',
      keyType: '1',
      keyWords: '',
      KeyState: '',
      // keyTime: ['', ''],
      //===================  顶部筛选 

      // 主要表格==================
      TableData: [{ name: '1', img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' }], //用户数据
      pageNum: 1,
      pageSize: 10,
      totalSize: 0,
      // ==================主要表格

      // 新增车位弹窗 =============================
      ruleForm: {},
      rules: {
        code: [
          { required: true, message: '车位号不能为空', trigger: 'blur' },
        ]
      },
      addSpacePopType: '',
      addSpaceShow: false,
      endTimeShow: false,
      // 图片相关
      uploadId: null,
      deleteImg: [],
      MyUploadImgNotDeteleShow: false,
      EchoImgList: [],
      // ==============================新增车位弹窗



      // 选择车位=======================
      selectShow: false,
      selectType: '',
      selectCarSpacePopKeyNumber: '',
      selectData: [],// 车位信息
      selectPopKeyCellName: '', //选择小区的筛选条件
      selectPopKeyCode: [],//选择小区的筛选条件
      selectPopKeyCodeData: [],
      props: {
        value: 'code',
        label: 'name'
      },
      selectPopKeyName: '',//选择归属人的筛选条件
      selectPopKeyphone: '',//选择归属人的筛选条件
      emptyText: '',
      // ===========================选择车位
    };
  },
  async activated() {
    this.reset() // 重置清空 然后查询列表
  },
  methods: {
    ToBatchImport() {
      this.$router.push('/batchImport?name=车位信息导入')
    },
    // 主要按钮 ===============================================================
    resetForm() {
      this.$set(this.ruleForm, 'code', '')
      this.$set(this.ruleForm, 'id', '')
      this.$set(this.ruleForm, 'residentialId', '')
      this.$set(this.ruleForm, 'residentialName', '')
      this.$set(this.ruleForm, 'belongUserType', '')
      this.$set(this.ruleForm, 'belongUserId', '')
      this.$set(this.ruleForm, 'pictureUrl', '')
      this.$set(this.ruleForm, 'propertyTermStart', '')
      this.$set(this.ruleForm, 'propertyTermEnd', '')
      this.$set(this.ruleForm, 'propertyTermYears', '40')//默认设置产权为40年
    },
    addClick() {
      this.resetForm() //清空内容

      // 处理附件
      this.MyUploadImgNotDeteleShow = false
      this.uploadId = 0
      this.deleteImg = []
      this.EchoImgList = []
      setTimeout(() => {
        this.MyUploadImgNotDeteleShow = true
      }, 50)
      this.endTimeShow = false //产权的截止时间，默认不显示
      this.addSpacePopType = 'add'
      this.addSpaceShow = true
    },
    async updateClick(row) {

      let res = await this.$api.car.myParkingSpaceDetail(row.id)
      console.log('修改点击了', row, res);
      if (res.code == 200) {

        this.$set(this.ruleForm, 'code', res.data.code)
        this.$set(this.ruleForm, 'id', res.data.id)
        this.$set(this.ruleForm, 'residentialId', res.data.residentialId)
        this.$set(this.ruleForm, 'residentialName', res.data.rqName)
        this.$set(this.ruleForm, 'belongUserType', res.data.belongUserType)
        this.$set(this.ruleForm, 'belongUserId', res.data.belongUserId)
        this.$set(this.ruleForm, 'pictureUrl', res.data.pictureUrl)
        if (res.data.pictureUrl) {
          this.EchoImgList = [res.data.pictureUrl]
        }else{
          this.EchoImgList = []
        }

        this.$set(this.ruleForm, 'propertyTermYears', res.data.propertyTermYears)
        this.$set(this.ruleForm, 'propertyTermStart', res.data.propertyTermStart)
        this.$set(this.ruleForm, 'propertyTermEnd', res.data.propertyTermEnd)
        this.endTimeShow = true
        this.MyUploadImgNotDeteleShow = false
        this.uploadId = res.data.id
        this.deleteImg = []
        setTimeout(() => {
          this.MyUploadImgNotDeteleShow = true
        }, 50)
      } else {
        this.$message.error(res.message)
      }
      this.addSpacePopType = 'update'
      this.addSpaceShow = true
    },
    bindingClick(row) {
      console.log('绑定点击了', row);
      this.$router.push(`/car/carSpaceBindingCar?id=${row.id}`)
    },
    deleteClick(row) {
      console.log('删除点击了', row);

      this.$confirm('此操作将删除该车位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.car.myParkingSpaceDelete(row.id)
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.getTableList()
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //======================================================================主要按钮

    // 新增车位 =============================
    toSelect(val) {
      this.selectShow = true
      if (val == '所属小区') {
        this.selectType = 'cell'
        this.selectPopKeyCellName = ''
        this.selectPopKeyCode = ''
        this.myGetRegionListForCarSpace()
        this.getSelectCellData()
      }
      if (val == '归属人') {
        this.selectType = 'people'
        this.selectPopKeyName = ''
        this.selectPopKeyphone = ''
        this.selectData = []
        this.emptyText = '请输入搜索条件'
      }
    },

    async myGetRegionListForCarSpace() { //获取筛选项的地区列表
      let res = await this.$api.car.myGetRegionListForCarSpace()
      if (res.code == 200) {
        this.selectPopKeyCodeData = res.data
      } else {
        this.$message.error(res.message)
      }

    },
    addSpaceOk() {

      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {

          if (!this.ruleForm.residentialId) {
            this.$message.error('请选择归属小区')
            return
          }
          if (!this.ruleForm.belongUserId) {
            this.$message.error('请选择归属人')
            return
          }
          if (!this.ruleForm.propertyTermEnd) {
            this.$message.error('请选择产权开始时间')
            return
          }
          this.$confirm('是否提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {

            this.deleteImg.forEach(el => {
              this.$api.ImgFile.delete(defaultUrl+'/business/parkingSpace/deleteImage', {
                "imageUrl": el
              })
            })

            let { code, residentialId, belongUserType, belongUserId, pictureUrl, propertyTermStart, propertyTermEnd, id, propertyTermYears } = this.ruleForm

            if (this.addSpacePopType == 'add') {
              let params = {
                code, residentialId, belongUserType, belongUserId, pictureUrl, propertyTermStart, propertyTermEnd, propertyTermYears
              }
              let res = await this.$api.car.myParkingSpaceInsert(params)
              if (res.code == 200) {
                this.$message({
                  message: '新增成功！',
                  type: 'success'
                });
                this.getTableList()
                this.addSpaceShow = false
              } else {
                this.$message.error(res.message)
              }
            } else if (this.addSpacePopType == 'update') {
              let params = {
                code, residentialId, belongUserType, belongUserId, pictureUrl, propertyTermStart, propertyTermEnd, id, propertyTermYears
              }
              let res = await this.$api.car.myParkingSpaceUpdate(params)
              if (res.code == 200) {
                this.$message({
                  message: '修改成功！',
                  type: 'success'
                });
                this.getTableList()
                this.addSpaceShow = false
              } else {
                this.$message.error(res.message)
              }
            }
          })

        }

      });
    },
    timeChange(val) {
      // 计算产权截止日期
      function calculateDateAfterFortyYears(dateString, years) {
        let parts = dateString.split('-');
        let year = parseInt(parts[0], 10);
        let month = parseInt(parts[1], 10) - 1; // 注意月份从0开始  
        let day = parseInt(parts[2], 10);
        let date = new Date(year, month, day);
        // 增加40年  
        date.setFullYear(date.getFullYear() + years);
        let newYear = date.getFullYear();
        let newMonth = date.getMonth() + 1;
        let newDay = date.getDate();
        newMonth = newMonth < 10 ? '0' + newMonth : newMonth;
        newDay = newDay < 10 ? '0' + newDay : newDay;
        return `${newYear}-${newMonth}-${newDay} ${dateString.slice(11)}`;
      }
      if (val) {
        this.endTimeShow = true
        if (this.ruleForm.propertyTermYears == 40) { //40年产权
          this.$set(this.ruleForm, 'propertyTermEnd', calculateDateAfterFortyYears(val, 40))
        }
        if (this.ruleForm.propertyTermYears == 70) {//70年产权
          this.$set(this.ruleForm, 'propertyTermEnd', calculateDateAfterFortyYears(val, 70))
        }
      } else {
        this.endTimeShow = false
      }
    },
    deleteImgList(el) {
      this.deleteImg.push(el)
    },
    getImgList(arr) {
      this.$set(this.ruleForm, 'pictureUrl', arr[0])
    },
    // ===================================新增车位



    // 选择弹窗==============================================================
    async getSelectCellData() { //获取归属小区列表
      //获取表格数据 selectData
      let res = await this.$api.car.myGetListForCarSpace({
        "name": this.selectPopKeyCellName, //非必填
        "code": this.selectPopKeyCode[this.selectPopKeyCode.length - 1] //非必填
      })
      console.log(res, '获取了归属小区');
      if (res.code == 200) {
        this.selectData = res.data
      } else {
        this.$message.error(res.message)
      }

      // 然后判断是否之前选中过，然后激活
      this.selectData.forEach((el, i) => {
        if (el.id == this.ruleForm.residentialId) {
          this.$nextTick(() => {
            this.$refs.selectTable.setCurrentRow(this.selectData[i])
          })
        }
      })
    },
    async getSelectPeopleData() { //获取归属人列表
      console.log('获取了归属人');
      if (!this.selectPopKeyName && !this.selectPopKeyphone) {
        this.emptyText = '请输入搜索条件'
      }
      //获取表格数据 selectData
      if (this.ruleForm.belongUserType == 'user') {
        let res = await this.$api.car.myGetAppUserInfoAccurately({
          "name": this.selectPopKeyName, //用户姓名
          "phoneNumber": this.selectPopKeyphone //用户账号(手机号)
        })
        console.log(res, '获取了归属个人列表');
        if (res.code == 200) {
          if (res.data.length == 0) {
            this.emptyText = '暂无数据'
          }
          this.selectData = res.data

        } else {
          this.$message.error(res.message)
        }
      } else {
        let res = await this.$api.car.myGetCompanyInfoAccurately({
          "name": this.selectPopKeyName,
          "phoneNumber": this.selectPopKeyphone
        })
        console.log(res, '获取了归属机构列表');
        if (res.code == 200) {
          if (res.data.length == 0) {
            this.emptyText = '暂无数据'
          }
          this.selectData = res.data
        } else {
          this.$message.error(res.message)
        }
      }
      // 然后判断是否之前选中过，然后激活
      this.selectData.forEach((el, i) => {
        if (el.id == this.ruleForm.belongUserId) {
          this.$nextTick(() => {
            this.$refs.selectTable.setCurrentRow(this.selectData[i])
          })
        }
      })
    },
    SelectSouSuo() { //获取车主列表
      if (this.selectType == 'cell') {
        this.getSelectCellData()
      }
      if (this.selectType == 'people') {
        this.getSelectPeopleData()
      }
    },
    selectClick(val) { //单击车主事件
      console.log(val, '选中项');
    },
    selectOk() { // 选择车主确认按钮
      let data = this.$refs['selectTable'].store.states.currentRow
      if (!data) {
        this.$message.error('请选择')
        return
      }
      if (this.selectType == 'cell') {
        this.$set(this.ruleForm, 'residentialId', data.id)
        this.$set(this.ruleForm, 'residentialName', data.name)
      } else if (this.selectType == 'people' && this.ruleForm.belongUserType == 'user') {
        this.$set(this.ruleForm, 'belongUserId', data.id)
      } else if (this.selectType == 'people' && this.ruleForm.belongUserType == 'company') {
        this.$set(this.ruleForm, 'belongUserId', data.id)
      }

      this.selectShow = false
    },
    // =================================================================选择弹窗

    // 列表 =====================================================================
    PageChange(e) {//分页器——页数变化
      this.pageNum = e
      this.getTableList()
    },
    pageSizeChange(e) { //分页器——每页数量变化
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    SouSuo() {
      this.pageNum = 1
      this.getTableList()
    },
    reset() {
      this.pageNum = 1
      this.keyName = ''
      this.keyType = '1'
      this.keyWords = ''
      this.KeyState = ''
      // this.keyTime = ['', '']
      this.getTableList()
    },
    //按条件查询菜单列表
    async getTableList() {
      // if (!this.keyTime) { this.keyTime = ['', ''] }
      let params = {
        "managementFeesStatus": this.KeyState, //管理费状态 0未缴纳 1正常 2已延期  字符串格式 查所有记录 不传该字符串或穿"" 空字符串
        "rqName": this.keyName, //小区名称
        "code": "", //车位号
        "belongUserName": "", //归属人姓名
        "tenantUserName": "", //租赁人姓名
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      switch (this.keyType) {
        case '1': params.code = this.keyWords
          break
        case '2': params.belongUserName = this.keyWords
          break
        case '3': params.tenantUserName =this.keyWords
          break
      }
      let res = await this.$api.car.myParkingSpaceList(params)
      if (res.code == 200) {
        if (res.data.list.length == 0 && this.pageNum != 1) {
          this.pageNum = 1
          this.getTableList()
          return
        }
        this.TableData = res.data.list;
        this.totalSize = res.data.total;
      } else {
        this.$message.error(res.message)
      }

    },
    // ======================================================================列表

  },


};
</script>
<style scoped lang="less">
.tableBox {
  margin-top: 100px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        background-color: #fafafa;
      }
    }
  }
}

.popTableStyle {
  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        background-color: #efefef;
      }
    }

    .el-table__body tr.current-row>td.el-table__cell {
      background-color: #409eff;

      .cell {
        color: white;
        font-weight: 600;
      }
    }
  }
}

.dialogStyle {
  /deep/ .el-dialog {
    border-radius: 20px;

    .el-dialog__body {
      padding: 0 20px;

      .el-divider {
        margin: 20px 0;
      }
    }
  }
}

.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {

      // border-left: 1px solid #aaa;
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}



.Top {
  position: relative;

}
</style>